<template>
    <div class="content">
        <TableLayout form-title="">
        <div slot="form-title" class="table-title"></div>
            <el-form :model="query" class="formInline" :rules="rules" ref="query" label-width="90px"  slot="form">          
                <el-row :gutter="41">
                    <el-col :span="8" v-if="schoolType == '0'"> 
                        <el-form-item label="年级" prop="gradeId" >
                            <grade v-model="query.gradeId" :isDefaultFill='true' 
                            @defaultFillGrade='defaultFillGrade'
                            @getGradeName='getGradeName'></grade>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="班级" prop="classId">
                            <getClass v-model="query.classId" 
                            @getClassList='getClassList'
                            :grade='query.gradeId'></getClass>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8"> 
                        <el-button type="primary" @click="onSubmit('query')">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <div class="table-title" slot="table-title">
            </div>
            <el-table :data="queryData" style="width: 100%" border  v-loading="loading" ref="multipleTable">
                <el-table-column label="年级" v-if="schoolType == 0" prop="gradeName" align="center" width="200">
                </el-table-column>
                <el-table-column label="班级" align="center" prop="className" width="200">
                </el-table-column>
                <el-table-column label="宣言" align="center" prop="sContent" >
                    <template scope="scope">
                         {{scope.row.sContent || '--'}}
                    </template>
                </el-table-column>
               <el-table-column align="left" label="操作" width="120px">
                    <template scope="scope">
                        <el-button  type="text" class="btn-success"
                         @click="edit(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
            </div>
        </TableLayout>
        <el-dialog title="班级宣言" :visible.sync="dialogFormVisible" size="tiny" :before-close="handleCloseCheck">
            <el-form label-width="80px" class="app-content" :rules="rules" :model="ruleForm" ref="ruleForm" label-position="right">
                <div class="dialog-box">
                    <el-row v-if="schoolType == 0">
                        <el-col :span="24">
                            <el-form-item label="年级" >
                                {{ruleForm.gradeName}}
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="班级">
                                 {{ruleForm.className}}
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="班级宣言" prop='declaration'>
                                <el-input v-model="ruleForm.declaration"  type="textarea" :rows="4" placeholder="请输入内容,最大长度60位" 
                                :maxlength="60"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div class="footer">
                        <el-button @click="cancel('ruleForm')">取消</el-button>
                        <el-button type="primary" @click="submitForm('ruleForm')" :loading="loadingBtn">保 存</el-button>
                    </div>
                </div>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import TableLayout from 'components/TableLayout';
import { getCopyWrtierByGrade, saveCopyWrtier } from 'api/wisdom';
import { mapGetters, mapState, mapActions } from 'vuex';
import grade from 'components/SchoolClasss/grade';
import getClass from 'components/SchoolClasss/class1';
export default {
    name: 'declarationList',
    components: { TableLayout, grade, getClass},
    data() {
        return {
            loadingBtn: false,
            loading: true,
            dialogFormVisible: false,
            gradeName: '',
            gradeList: [],
            classList: [],
            onOff: true,
            query: {
                gradeId: '',
                classId: ''
            },
            queryData: [],
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            ruleForm: {
                gradeId: '',
                classId: '',
                gradeName: '',
                className: '',
                declaration: ''
            },
            rules: {
                gradeId: [
                    {required: true, message: '请选择年级', trigger: 'blur'}
                ],
                declaration: [
                    { required: true, message: '请输入班级宣言', trigger: 'blur' },
                    { pattern: /^[^\s]+$/, message: '请勿输入空格', trigger: 'blur,change'}
                ]
            }
        }
    },
    computed: {
        ...mapGetters([
            'uid',
            'schoolId',
            'schoolName',
            'schoolType',
            'roleType'
        ]),
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated // 局部刷新列表
        })
    },
    created() {
        console.log(this.schoolType, 'schoolType')
        if (this.schoolType != 0) { // 学校类型为机构时，直接调查询接口
            setTimeout(() => {
                this.getClassDeclaration()
            }, 100)
        }
    },
    watch: {// 学校类型为正常学校时，进入页面，监听gradeId的改变，再调查询接口
        'query.gradeId'(val) {
            if (this.onOff) {
                // this.getClassDeclaration();
                setTimeout(() => {
                    this.getClassDeclaration()
                }, 100)
                this.onOff = false;
            }
        }
    },
    methods: {
        ...mapActions(['ChangePageSize']),
        onSubmit(ruleForm) {
            this.$refs[ruleForm].validate(valid => {
                if (valid) {
                    this.getClassDeclaration()
                } else {
                    return false;
                }
            });
        },
        defaultFillGrade(gradeId) {
            this.query.gradeId=gradeId;
            
        },
        getGradeName(gradeName) {// 获取年级名字
            this.gradeName=gradeName;
        },
        getClassList(classList) {// 获取该年级下的班级
            console.log(classList, 'this.classList')
            this.classList=classList;
        },
        getClassDeclaration() {
            this.loading=true;
            let json={
                fSchoolId: this.schoolId,
                fGradeId: this.query.gradeId,
                fClassId: this.query.classId
            }
            console.log(json, 'json')
            getCopyWrtierByGrade(json).then(res => {
                this.loading=false;
                this.queryData = res.data.content;
                this.queryData.forEach((item) => {
                    item.gradeName=this.gradeName;// 自己给表格填充的年级名字字段
                    item.className=this.classNameByclassId(item.fClassId);// 自己给表格填充的班级名字字段
                })
            }).catch(() => {
                this.loading=false;
            })
        },
        // 通过班级Id 查找出对应的班级名
        classNameByclassId(fClassId) {
            let classObj=this.classList.find((item) => {
                return item.classId === fClassId;
            });
            return classObj.classNickName
        },
        edit(row) {
            this.dialogFormVisible = true;
            this.ruleForm.className = row.className;
            this.ruleForm.classId = row.fClassId;
            this.ruleForm.gradeName = row.gradeName;
            this.ruleForm.declaration = row.sContent;
        },
        submitForm(ruleForm) {
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {// 验证通过
                    this.loadingBtn=true;
                    let json={
                        fSchoolId: this.schoolId,
                        fClassId: this.ruleForm.classId,
                        sContent: this.ruleForm.declaration
                    }
                    saveCopyWrtier(json).then(res => {
                        this.loadingBtn = false;
                        this.$message.success('编辑成功')
                        this.cancel()
                        this.getClassDeclaration()
                    }).catch(() => {
                        this.loadingBtn = false;
                    })  
                } else {
                    return false;
                }
            });
        },
        handleCloseCheck() {
            this.loadingBtn = false;
            this.$refs.ruleForm.resetFields();
            this.ruleForm.declaration = '';
            this.dialogFormVisible = false;
        },
        cancel() {
            this.loadingBtn = false;
            this.$refs.ruleForm.resetFields();
            this.ruleForm.declaration = '';
            this.dialogFormVisible = false;
        }
    }
}
</script>

<style lang="scss" scoped>
.content {
    .dialog-box{
        width: 90%;
        margin: 0 auto;
        .el-textarea{
            width: 100%;
        }
        .footer{
            margin-top: 20px;
            text-align: center;
        }
    }
}
</style>
